<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<style>
    .serach_input{ width: 180px; margin-right: 5px;}
    .padding_top{ margin-top: 0px;}
</style>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="">
        <div class="layui-input-item">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm padding_top" lay-event="countyInAdd">添加</button>
            </div>
            <div  class="layui-inline">
                <input type="text" name="title" placeholder="请输入标题" autocomplete="on" class="layui-input serach_input layui-btn-sm ">
            </div>
            <div class="layui-inline serach_input">
                <select name="interest" lay-filter="aihao" class="layui-btn-sm">
                    <option value="0">审核</option>
                    <option value="1" selected="">待审核</option>
                </select>
            </div>
            <div class="layui-inline  serach_input ">
                <select name="interest1" lay-filter="aihao">
                    <option value="0">已发布</option>
                    <option value="1" selected="">待发布</option>
                </select>
            </div>
            <div class="layui-inline">
                <input type="text" name="date" id="date" placeholder="开始日期" autocomplete="on" class="layui-input serach_input layui-btn-sm">
            </div>
            <div class="layui-inline  ">
                <input type="text" name="date" id="date1" placeholder="结束日期" autocomplete="on" class="layui-input serach_input layui-btn-sm">
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm padding_top" >搜索</button>
            </div>
        </div>

    </div>
</script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="发布|未发布" lay-filter=""sexDemo {d.id=1003 ? 'checked' :  ''}}>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../layui.all.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;
        var laydate = layui.laydate;
        laydate.render({
            elem: "#date"
            ,type: 'datetime'
        });
        laydate.render({
            elem: "#date1"
            ,type: 'datetime'
        });
        table.render({
            elem: '#test'
            ,data:[
                {
                    "id":1,
                    'title':"中国国内新闻重大事件中国国内新闻重大事件中国国内新闻重大事件中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12 12:14:11',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
                {
                    "id":1,
                    'title':"中国国内新闻重大事件",
                    "publish":"admin",
                    "publish_time":'2018-14-12',
                    "hits":45,
                    "dian":55,
                    "is_up":1,
                    "ip":'192.168.10.10',
                },
            ]
            // ,url:'/test/table/demo1.json'
            ,toolbar: '#toolbarDemo'
            ,title: '中国国内新闻列表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'title', title:'标题',sort:true}
                ,{field:'publish', title:'发布者', width:150}
                ,{field:'publish_time', title:'发布时间', width:280, sort: true}
                ,{field:'hits', title:'点击数', width:100,sort:true}
                ,{field:'dian', title:'评论数',width:100,sort:true}
                ,{field:'is_up', title:'是否发布', width:105, templet: '#switchTpl', unresize: true}
                ,{field:'ip', title:'IP',width:200}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
            ,count:20
            ,limit:12
            ,loading:true
            ,size:'lg'
        });
//监听性别操作
        // form.on('switch(sexDemo)', function(obj){
        //    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        // });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'countyInAdd':
                    var openwin=layer.open({
                        type:2,
                        title:"国内新闻添加",
                        content:'./countyInAdd.html',
                        area:['100%','100%'],
                        maxmin:true,
                    });
                    layer.full(openwin);
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>

</body>
</html>